<template>
  <div class="goods-style">
    <div class="title">商品组</div>
    <el-form :model="datas" label-width="120px" label-position="left">
      <el-form-item label="商品来源" prop="type">
        <el-radio-group v-model="datas.type">
          <el-radio label="auto">自动获取</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品分类" prop="classifyId">
        <el-select v-model="datas.classifyId">
          <el-option v-for="item in classify" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="品牌分类" prop="branId">
        <el-select v-model="datas.branId">
          <el-option v-for="item in brands" :key="item.id" :label="item.id" :value="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="显示数量" prop="limit">
        <el-input-number v-model="datas.limit" :min="1" :controls="false" />
      </el-form-item>
      <el-form-item label="显示类型" prop="display">
        <el-radio-group v-model="datas.display">
          <el-radio label="list">列表平铺</el-radio>
          <el-radio label="slide" :disabled="datas.column === 1">横向滚动</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分列数量" prop="column">
        <el-radio-group v-model="datas.column">
          <el-radio :label="1" :disabled="datas.display === 'slide'">1列</el-radio>
          <el-radio :label="2">2列</el-radio>
          <el-radio :label="3">3列</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品组名称" prop="title">
        <el-input v-model="datas.title" />
      </el-form-item>
      <el-form-item label="显示商品组名称" prop="lookTitle">
        <el-radio-group v-model="datas.lookTitle">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否查看更多" prop="lookMore">
        <el-radio-group v-model="datas.lookMore">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup name="GoodsStyle">
import { ref, toRefs, onMounted } from "vue";
import { getWaresBrandList, getWaresCategoryList } from "@/api/modules/inventory";
const props = defineProps({
  datas: {
    type: Object
  }
});
const { datas } = toRefs(props);
const classify = ref([]);
const brands = ref([]);
onMounted(async () => {
  const [brand, category] = await Promise.all([getWaresBrandList({ pageNum: 1, pageSize: 9999 }), getWaresCategoryList()]);
  brands.value = brand.data.list;
  classify.value = category.data;
});
</script>

<style scoped lang="scss">
.title {
  padding: 5px;
  margin-bottom: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  border-left: 4px solid var(--el-color-primary);
}
</style>
